<!--
 * @Author: alenjzhang
 * @Date: 2024-04-08 10:35:39
 * @Description: 照护等级添加
-->
<script setup lang="ts">
// import clsx from 'clsx';
import { Form } from 'ant-design-vue'
import { reactive, ref } from 'vue'
import { useCareStore } from '@/store'

const props = defineProps<{
  class?: string
}>()

const emit = defineEmits(['add'])

const { addLevel } = useCareStore()

const open = ref(false)
const placeholder = '请输入照护等级名称'
const title = '照护等级'
const useForm = Form.useForm
const rules = reactive({
  name: [{ required: true, message: placeholder }],
})
const formState = reactive<{
  name: string
}>({
  name: '',
})
const { validate, resetFields, validateInfos } = useForm(formState, rules)

function onOk() {
  validate().then(() => {
    addLevel(formState.name).then(() => {
      emit('add')
      open.value = false
    })
  })
}

function onAdd() {
  resetFields()
  open.value = true
}
</script>

<template>
  <div :class="props.class">
    <span @click="onAdd">
      <slot>
        <a-button type="primary">添加{{ title }}</a-button>
      </slot>
    </span>
    <a-modal :open :title="`添加${title}`" @cancel="open = false" @ok="onOk">
      <a-form>
        <a-form-item :label="`${title}名称`" v-bind="validateInfos.name">
          <a-input v-model:value="formState.name" :placeholder="placeholder" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped></style>
